<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>历史批次表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @select="crud.selectChange"
                  @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange"
                  :default-sort="{prop: 'upTs', order: 'descending'}"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column type="selection" width="55"/>
          <el-table-column v-if="false" prop="pkId" label="id"/>
          <el-table-column v-if="columns.visible('bitchId')" :show-overflow-tooltip="true" min-width="150"
                           prop="bitchId"
                           label="批次号"/>
          <el-table-column v-if="columns.visible('dateTs')" :show-overflow-tooltip="true" min-width="100" prop="dateTs"
                           label="日期">
            <template slot-scope="scope">
              <i v-if="scope.row.dateTs!=''&& scope.row.dateTs!=null" class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.dateTs }}</span>
            </template>
          </el-table-column>

          <el-table-column v-if="columns.visible('bitchType')" :show-overflow-tooltip="true" min-width="100"
                           prop="bitchType"
                           label="类型" :filters="hisStreamTypesDict" key="bitchType" :formatter="streamTypeFormatter"
                           filter-placement="bottom-end"
                           :filter-multiple="false" column-key="bitchType">
            <template slot-scope="scope">
              <el-tag size="small" type="primary" style="width:60px;">
                {{ streamTypeFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('isReduction')" key="isReduction" :show-overflow-tooltip="true"
                           min-width="100" prop="isReduction"
                           label="是否还原" :filters="[{ text: '是', value: 'YES' },{ text: '否', value: 'NO' }]"
                           filter-placement="bottom-end"
                           :filter-multiple="false" column-key="isReduction">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isReduction == 'YES'" type="primary">是</el-tag>
              <el-tag v-if="scope.row.isReduction == 'NO'" type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('reductionUser')" :show-overflow-tooltip="true" min-width="100"
                           prop="reductionUser"
                           label="还原人"/>
          <el-table-column v-if="columns.visible('reductionTs')" :show-overflow-tooltip="true" prop="reductionTs"
                           label="还原时间 "
                           width="160">
            <template slot-scope="scope">
              <i v-if="scope.row.reductionTs!=''&& scope.row.reductionTs!=null" class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.reductionTs }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('upUser')" :show-overflow-tooltip="true" min-width="100" prop="upUser"
                           label="更新人"/>
          <el-table-column v-if="columns.visible('upTs')" :show-overflow-tooltip="true" prop="upTs" label="更新时间 "
                           width="160">
            <template slot-scope="scope">
              <i v-if="scope.row.upTs!=''&& scope.row.upTs!=null" class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
import cronTaskApi from '@/api/cronTask/cronTask'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/system/backUp/CRUD.operation'

const queryList = [{
  'cloumValue': 'bitchId',
  'cloumName': '批次号'
}, {
  'cloumValue': 'appCode',
  'cloumName': '应用编号'
}];
const defaultCrud = CRUD({
  title: '历史任务批次',
  queryList: queryList,
  url: '/api/jobHisBitch/selectPages',
  sort: 'sort,asc',
  crudMethod: {
    ...cronTaskApi
  }
})
const defaultForm = {}
export default {
  name: 'hisBitch',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['his_stream_type'],
  data() {
    return {
      permission: {
        reduction: ['backUpLog:reduction']
      },
      streamDict: [],
      hisStreamTypesDict: []
    }
  },
  computed: {},
  created() {
    this.streamDict = this.dict.his_stream_type
  },
  watch: {
    streamDict() {
      this.$nextTick(() => {
        this.streamDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.hisStreamTypesDict.push(obj)
        })
      })
    },
  },
  methods: {
    streamTypeFormatter(val) {
      return this.dict.label.his_stream_type[val.bitchType]
    }
  }
}
</script>
